<template>
	<view class="container">
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="list" v-for="(item,i) in list" :key="i" @click="goApply(item)">
				<view class="pic">
					<image class="img" mode="aspectFill" :src="returnPic(item.picture)"></image>
					<view class="type">{{item.onOff==1?'线上活动':'线下活动'}}</view>
					<view class="time">{{item.diffText}}</view>
				</view>
				<view class="name">{{item.name}}</view>
				<view class="intro line3">{{item.details}}</view>
				<view class="btnbox flex">
					<view class="num yellow flex-1">{{item.enrollNum}}人正在参与</view>
					<view class="btn" @click="goApply(item)" v-if="item.enrollOrNot">立即参与</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getActList } from '@/common/API/landlord';
import dayjs  from "dayjs"
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)

const list = ref<any>([])
const upCallback = async (mescroll)=>{
	let data = {
		pageNo: mescroll.num,
		pageSize: mescroll.size
	}
	let res = await getActList(data)
	let curPageData = res.list;
	let curPageLen = curPageData.length;
	curPageData.forEach(item=>{
		let hour = dayjs(item.endTime).diff(new Date(), 'hour')+1
		console.log(hour)
		item.diffText = hour>0?`距结束${parseInt(hour/24)}天${hour%24}小时`:'已结束 00:00:00'
		console.log(hour)
	})
	if(mescroll.num == 1) list.value = [];
	list.value = list.value.concat(curPageData);
	mescroll.endSuccess(curPageLen);
}

const resetScroll = ()=>{
	list.value = [];
	downCallback()
}

//处理图片路径
const returnPic = (url) =>{
	let urlPic = url.split(',')
	return urlPic[0]
}

//详情
const goApply = (item:any) => {
	console.log(item)
	uni.navigateTo({
		url: `/pages/personal/activity/index?info=${encodeURIComponent(JSON.stringify(item))}`
	})
}
</script>
<style lang="scss" scoped>
.container{
	padding-top: 20rpx;
	.list{
		background: #fff;
		padding: 20rpx 32rpx 24rpx;
		margin-bottom: 20rpx;
		.pic{
			width: 686rpx;
			height: 456rpx;
			box-shadow: 0 40rpx 80rpx 2rpx rgba(0,0,0,0.05);
			border-radius: 8rpx;
			overflow: hidden;
			position: relative;
			.type{
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 8rpx;
				height: 44rpx;
				line-height: 44rpx;
				background: #FD9618;
				font-size: 24rpx;
				padding: 0 22rpx 0 24rpx;
				color: #fff;
			}
			.time{
				position: absolute;
				bottom: 20rpx;
				right: 0;
				background: #FFFFFF;
				border-radius: 8rpx 0 0 8rpx;
				opacity: 0.8;
				padding: 4rpx 16rpx 4rpx 12rpx;
			}
		}
		.name{
			font-size: 30rpx;
			line-height: 44rpx;
			padding: 20rpx 0 10rpx;
			border-bottom: 2rpx solid #E5E5E5;
		}
		.intro{
			font-size: 26rpx;
			color: #999;
			line-height: 44rpx;
			margin: 10rpx 0 44rpx;
			word-break: break-all;
		}
		.btnbox{
			.num{
				line-height: 56rpx;
				font-size: 24rpx;
			}
			.btn{
				width: 156rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				color: #fff;
				background: #FD9618;
				border-radius: 200rpx;
				font-size: 26rpx;
			}
		}
	}
}
</style>